<!-- 新增试复样登录表单组件 -->
<template>
  <a-form ref="formRef" layout="horizontal" auto-label-width :model="dataForm">
    <a-row :gutter="20" justify="space-between">
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="登记日期"
          field="recordDate"
          :label-col-flex="pageData.labelColFlex"
          :rules="[{ required: true, message: '登记日期必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-date-picker  popup-container="html"  class="bacClass" style="width: 270px" v-model="dataForm.recordDate" />
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="工艺类型" :label-col-flex="pageData.labelColFlex">
          <a-select popup-container="html" 
            class="bacClass"
            style="width: 270px"
            v-model="dataForm.craftType"
            allow-clear
            allow-search
            @search="selectAwait($event, 1)"
            @focus="selectAwait('', 1)"
          >
            <a-option v-for="item in pageData.nameList1" :key="item.id" :value="item.craftType">{{
              item.craftType
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="流转卡号"
          :label-col-flex="pageData.labelColFlex"
          field="roamCard"
          :rules="[{ required: true, message: '流转卡号必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-select popup-container="html" 
            class="bacClass"
            style="width: 270px"
            v-model="dataForm.roamCard"
            allow-clear
            allow-search
            @search="selectAwait($event, 2)"
            @focus="selectAwait('', 2)"
            @change="changeCircul"
            ref="circulRef"
          >
            <a-option
              v-for="item in pageData.nameList2"
              :key="item.id"
              :value="item.flowCardCode"
              >{{ item.flowCardCode }}</a-option
            >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="布号" :label-col-flex="pageData.labelColFlex" field="clothNumber">
          <!-- <a-input class="aInput" v-model="dataForm.clothNumber" /> -->
          <a-select popup-container="html" 
            class="bacClass"
            style="width: 270px"
            v-model="dataForm.clothNumber"
            allow-clear
            allow-search
            @search="selectAwait($event, 12)"
            @focus="selectAwait('', 12)"
          >
            <a-option v-for="item in pageData.nameList12" :key="item.id" :value="item.clothCode">{{
              item.clothCode
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="品名" :label-col-flex="pageData.labelColFlex" field="tradeName">
          <!-- <a-input class="aInput" v-model="dataForm.tradeName" /> -->
          <a-select popup-container="html" 
            class="bacClass"
            style="width: 270px"
            v-model="dataForm.tradeName"
            allow-clear
            allow-search
            @search="selectAwait($event, 13)"
            @focus="selectAwait('', 13)"
          >
            <a-option v-for="item in pageData.nameList13" :key="item.id" :value="item.brandName">{{
              item.brandName
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="计划单号" :label-col-flex="pageData.labelColFlex" field="planAdd">
          <a-select popup-container="html" 
            class="bacClass"
            style="width: 270px"
            v-model="dataForm.planAdd"
            allow-clear
            allow-search
            @search="selectAwait($event, 3)"
            @focus="selectAwait('', 3)"
          >
            <a-option v-for="item in pageData.nameList3" :key="item.id" :value="item.orderCode">{{
              item.orderCode
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>

    <a-row :gutter="20" justify="space-between">
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="客户名称" :label-col-flex="pageData.labelColFlex" field="customerName">
          <a-select popup-container="html" 
            class="bacClass"
            style="width: 270px"
            v-model="dataForm.customerName"
            allow-clear
            allow-search
            @search="selectAwait($event, 4)"
            @focus="selectAwait('', 4)"
          >
            <a-option v-for="item in pageData.nameList4" :key="item.id" :value="item.customName">{{
              item.customName
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="纱批" :label-col-flex="pageData.labelColFlex" field="yarnNumber">
          <a-input class="bacClass" v-model="dataForm.yarnNumber" />
        </a-form-item>
      </a-col>

      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="色号" :label-col-flex="pageData.labelColFlex" field="colourNumber">
          <!-- <a-input v-model="dataForm.colourNumber" class="aInput" /> -->
          <a-select popup-container="html" 
            class="bacClass"
            style="width: 270px"
            v-model="dataForm.colourNumber"
            allow-clear
            allow-search
            @search="selectAwait($event, 5)"
            @focus="selectAwait('', 5)"
          >
            <a-option
              v-for="item in pageData.nameList5"
              :key="item.id"
              :value="item.colourNumber"
              >{{ item.colourNumber }}</a-option
            >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="色称" :label-col-flex="pageData.labelColFlex" field="colorAccording">
          <!-- <a-input class="aInput" v-model="dataForm.colorAccording" /> -->
          <a-select popup-container="html" 
            class="bacClass"
            style="width: 270px"
            v-model="dataForm.colorAccording"
            allow-clear
            allow-search
            @search="selectAwait($event, 6)"
            @focus="selectAwait('', 6)"
          >
            <a-option v-for="item in pageData.nameList6" :key="item.id" :value="item.colorAnomia">{{
              item.colorAnomia
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="确认色" :label-col-flex="pageData.labelColFlex">
          <a-select popup-container="html" 
            class="bacClass"
            style="width: 270px"
            v-model="dataForm.colorConfirmation"
            allow-clear
            allow-search
            @search="selectAwait($event, 7)"
            @focus="selectAwait('', 7)"
          >
            <a-option
              v-for="item in pageData.nameList7"
              :key="item.id"
              :value="item.affirmColorClass"
              >{{ item.affirmColorClass }}</a-option
            >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="复样类型" :label-col-flex="pageData.labelColFlex" field="checkerType">
          <a-select popup-container="html" 
            class="bacClass"
            style="width: 270px"
            v-model="dataForm.checkerType"
            allow-clear
            allow-search
            @search="selectAwait($event, 8)"
            @focus="selectAwait('', 8)"
          >
            <a-option
              v-for="item in pageData.nameList8"
              :key="item.id"
              :value="item.duplicateType"
              >{{ item.duplicateType }}</a-option
            >
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="20" justify="space-between">
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="进度类型"
          :label-col-flex="pageData.labelColFlex"
          field="speedType"
          :rules="[{ required: true, message: '进度类型必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-select popup-container="html" 
            class="bacClass"
            style="width: 270px"
            v-model="dataForm.speedType"
            allow-clear
            allow-search
            @search="selectAwait($event, 9)"
            @focus="selectAwait('', 9)"
          >
            <a-option
              v-for="item in pageData.nameList9"
              :key="item.id"
              :value="item.scheduleType"
              >{{ item.scheduleType }}</a-option
            >
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="复样开始时间"
          :label-col-flex="pageData.labelColFlex"
          field="duplicateStartDate"
          :rules="[{ required: true, message: '复样开始时间必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-date-picker  popup-container="html"  class="bacClass" v-model="dataForm.duplicateStartDate" />
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="复样员"
          :label-col-flex="pageData.labelColFlex"
          field="checker"
          :rules="[{ required: true, message: '复样员必填' }]"
          :validate-trigger="['change', 'blur']"
        >
          <a-select popup-container="html" 
            class="bacClass"
            style="width: 270px"
            v-model="dataForm.checker"
            allow-clear
            allow-search
            @search="selectAwait($event, 10)"
            @focus="selectAwait('', 10)"
          >
            <a-option v-for="item in pageData.nameList10" :key="item.id" :value="item.name">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="对色资料" :label-col-flex="pageData.labelColFlex" field="coloringMatch">
          <a-input class="bacClass" v-model="dataForm.coloringMatch" />
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="复样完成时间"
          :label-col-flex="pageData.labelColFlex"
          field="duplicateEndDate"
        >
          <a-date-picker  popup-container="html" 
            class="bacClass"
            style="width: 270px"
            v-model="dataForm.duplicateEndDate"
          />
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="生产车间" :label-col-flex="pageData.labelColFlex" field="worksho">
          <a-input class="bacClass" v-model="dataForm.worksho" />
        </a-form-item>
      </a-col>
    </a-row>

    <a-row :gutter="20" justify="space-between">
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item
          label="复样说明"
          :label-col-flex="pageData.labelColFlex"
          field="duplicateExplain"
        >
          <a-input class="bacClass" v-model="dataForm.duplicateExplain" />
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="坯布编号" :label-col-flex="pageData.labelColFlex" field="grayCode">
          <a-select popup-container="html" 
            class="bacClass"
            style="width: 270px"
            allow-clear
            v-model="dataForm.grayCode"
            allow-search
            @search="searchHandler($event, 11)"
            @focus="selectAwait('', 11)"
          >
            <a-option v-for="item in pageData.nameList11" :key="item.id" :value="item.greyCode">{{
              item.greyCode
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="坯布名称" :label-col-flex="pageData.labelColFlex" field="grayName">
          <a-input class="bacClass" v-model="dataForm.grayName" />
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="纱支" :label-col-flex="pageData.labelColFlex" field="yarnCount">
          <a-input class="bacClass" v-model="dataForm.yarnCount" />
        </a-form-item>
      </a-col>
      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
        <a-form-item label="审评单号" :label-col-flex="pageData.labelColFlex" field="reviewAdd">
          <a-input class="bacClass" v-model="dataForm.reviewAdd" />
        </a-form-item>
      </a-col>

      <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24" class="mt-1">
        <a-checkbox
          :value="0"
          :default-checked="dataForm.duplicateType !== 0 ? false : true"
          @change="dataForm.duplicateType = $event ? 0 : -1"
          >复样完成</a-checkbox
        >
        <a-checkbox
          :value="1"
          :default-checked="dataForm.duplicateType !== 1 ? false : true"
          @change="dataForm.duplicateType = $event ? 2 : -1"
          >复样加急</a-checkbox
        >
        <a-checkbox
          :value="2"
          :default-checked="dataForm.duplicateType !== 2 ? false : true"
          @change="dataForm.duplicateType = $event ? 2 : -1"
          >合格</a-checkbox
        >
      </a-col>
    </a-row>
  </a-form>
</template>

<script lang="ts">
  import { post, get } from '@/api/http'
  import { ref, reactive, watch, toRef } from 'vue'
  import { TrialDupSampleReg } from '@/interface/dupSampleReg'
  import { FormInstance } from '@arco-design/web-vue'
  import dayjs from 'dayjs'
  import emitter from '@/hooks/useEventBus'
  export default {
    name: 'DupSampleRegisterAdd',
    props: {
      // pageData: {
      //     type: Object,
      //     default: () => ({}),
      //     require: true,
      // },
      dataForm: {
        type: Object,
        default: () => ({}),
        require: true,
      },
    },
    setup(props, { emit, expose }) {
      // const pageData: any = ref(props.pageData);
      // watch(props.pageData, (val) => {
      //     for (var key in val) {
      //         pageData.value[key] = val[key]
      //     };
      // });

      const dataForm: any = reactive({
        recordDate: '',
        craftType: '',
        yarnNumber: '',
        customerName: '',
        planAdd: '',
        reviewAdd: '',
        colourNumber: '',
        colorAccording: '',
        colorConfirmation: '',
        clothNumber: '',
        tradeName: '',
        yarnCount: '',
        duplicateStartDate: '',
        duplicateEndDate: '',
        checker: '',
        checkerType: '',
        grayCode: '',
        grayName: '',
        roamCard: '',
        coloringMatch: '',
        worksho: '',
        duplicateExplain: '',
        duplicateType: 0,
        speedType: '',
      })
      if (props.dataForm) {
        for (var key in props.dataForm) {
          dataForm[key] = props.dataForm[key]
        }
        // console.log(props.dataForm, '1')
      }
      if (!props.dataForm.id) {
        dataForm.recordDate = dayjs(new Date()).format('YYYY-MM-DD')
      }
      // const searchHandler = (event: any, index: number) => {
      //     emit('search-handler', event, index)
      // }
      // const selectAwait = (index: number) => {
      //     emit('select-await', index)
      // }
      const pageData: any = reactive({
        labelColFlex: '100px',
        nameList1: [],
        nameList2: [],
        nameList3: [],
        nameList4: [],
        nameList5: [],
        nameList6: [],
        nameList7: [],
        nameList8: [],
        nameList9: [],
        nameList10: [],
        nameList11: [],
        nameList12: [],
        nameList13: [],
      })
      const selectAwait = (val: any, num: number) => {
        if (num == 1) {
          post({
            url: 'pdm/duplicateSample/getFieldValue',
            data: { craftType: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList1 = data
            }
          })
        } else if (num == 2) {
          post({
            url: 'aps/circulatCard/getList',
            data: { flowCardCode: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList2 = data
            }
          })
        } else if (num == 3) {
          post({
            url: 'aps/planOrder/getDropValue',
            data: { orderCode: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList3 = data
            }
          })
        } else if (num == 4) {
          post({
            url: 'aps/custom/getDropValue',
            data: { customName: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList4 = data
            }
          })
        } else if (num == 5) {
          post({
            url: 'pdm/proofingManage/getFieldValue1',
            data: { colourNumber: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList5 = data
            }
          })
        } else if (num == 6) {
          post({
            url: 'pdm/proofingManage/getFieldValue1',
            data: { colorAnomia: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList6 = data
            }
          })
        } else if (num == 7) {
          post({
            url: 'pdm/affirmColorClass/getFieldValue',
            data: { affirmColorClass: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList7 = data
            }
          })
        } else if (num == 8) {
          post({
            url: 'pdm/duplicateType/getFieldValue1',
            data: { duplicateType: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList8 = data
            }
          })
        } else if (num == 9) {
          post({
            url: 'pdm/duplicateSchedule/getFieldValue1',
            data: { scheduleType: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList9 = data
            }
          })
        } else if (num == 10) {
          post({
            url: 'org/hrEmployee/getFieldValue1',
            data: { name: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList10 = data
            }
          })
        } else if (num == 11) {
          post({
            url: 'pdm/GreyInformation/getFieldValue1',
            data: { greyCode: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList11 = data
            }
          })
        } else if (num == 12) {
          post({
            url: 'pdm/DevFabricInfo/getFieldValue2',
            data: { clothCode: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList112 = data
            }
          })
        } else if (num == 13) {
          post({
            url: 'pdm/DevFabricInfo/getFieldValue2',
            data: { brandName: val },
          }).then(({ code, data, message }: any) => {
            if (code === 200) {
              pageData.nameList113 = data
            }
          })
        }
      }
      const formRef = ref<FormInstance>()
      emitter.on('saveHandler', (callBack: any) => {
        formRef.value?.validate().then((err) => {
          if (!err) {
            // expose({  });
            callBack(true, dataForm)
          } else {
            callBack(false)
          }
        })
      })
      const circulRef = ref()
      const changeCircul = () => {
        setTimeout(() => {
          pageData.nameList2.forEach((v: any) => {
            if (v.flowCardCode === dataForm.roamCard) {
              dataForm.colorConfirmation = v.affirmColor
              dataForm.colourNumber = v.colorCode
              dataForm.colorAccording = v.colorName
              dataForm.planAdd = v.orderCode
              dataForm.worksho = v.workshop
              dataForm.yarnNumber = v.yarnBatch
              dataForm.clothNumber = v.clothCode
              dataForm.tradeName = v.productName
              dataForm.grayCode = v.greyCode
              dataForm.grayName = v.greyName
              dataForm.coloringMatch = v.contrastColor
            }
          })
        }, 100)
      }

      return {
        dataForm,
        // searchHandler,
        pageData,
        selectAwait,
        formRef,
        changeCircul,
        circulRef,
      }
    },
  }
</script>

<style scoped>
  .aInput {
    background: #fff;
    border: 1px solid #c9cdd3;
    width: 270px;
  }
</style>
